웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
순수 자바스크립트를 사용해 인접한 형제 요소를 찾는 방법은 간단하지 않습니다. 하지만 제이쿼리 라이브러리의 + 결합자를 사용하면 매우 쉽게 형제 요소를 찾아 반환해 줍니다. 사용방법은 아래와 같습니다.
$('기준요소 + 인접한 형제요소')
예를들어 아래와 같은 코드에서 인접한 h2 코드의 형제요소 p코드를 찾는다고 할 경우 다음과 같습니다. 찾은 코드는 폰트색상을 빨간색으로 변경하겠습니다.
<body>
<h2>H2 element text</h2>
<p>P element text</p>
<h3>H3 element text</h3>
<p>P element text</p>
</body>
<script type="text/javascript">
$('h2 + p').css('color','red');
</script>
위에서 보는 것처럼 $('h2 + p') 는 가장 인접한 p코드를 찾아 반환합니다. 이때는 인접한 형제는 찾아 모두 반환하며 만약 하나가 아닌 다수의 형제 요소를 찾으려면 다음과 같은 방법을 사용할 수도 있습니다.
보시는 것처럼 siblings() 메소드를 사용하여 모든 형제요소를 찾았습니다. 결과는 아래와 같습니다.
다른 방법으로는 next() 또는 prev() 메소드를 사용해 해당 요소의 이전 또는 다음 형제 요소를 선택하는 것 역시 생각할 수 있습니다. 이 방법은 단 하나의 요소만을 반환하기 때문에 만약 전체 요소를 원한다면 nextAll() 또는 prevAll()을 사용하세요.
$('기준요소 + 인접한 형제요소')
예를들어 아래와 같은 코드에서 인접한 h2 코드의 형제요소 p코드를 찾는다고 할 경우 다음과 같습니다. 찾은 코드는 폰트색상을 빨간색으로 변경하겠습니다.
<body>
</body>
<script type="text/javascript">
$('h2 + p').css('color','red');
</script>
H2 element text
P element text
H3 element text
P element text
위에서 보는 것처럼 $('h2 + p') 는 가장 인접한 p코드를 찾아 반환합니다. 이때는 인접한 형제는 찾아 모두 반환하며 만약 하나가 아닌 다수의 형제 요소를 찾으려면 다음과 같은 방법을 사용할 수도 있습니다.
<script type="text/javascript">
$('h2').siblings('p');
</script>
</script>
보시는 것처럼 siblings() 메소드를 사용하여 모든 형제요소를 찾았습니다. 결과는 아래와 같습니다.
H2 element text
P element text
H3 element text
P element text
다른 방법으로는 next() 또는 prev() 메소드를 사용해 해당 요소의 이전 또는 다음 형제 요소를 선택하는 것 역시 생각할 수 있습니다. 이 방법은 단 하나의 요소만을 반환하기 때문에 만약 전체 요소를 원한다면 nextAll() 또는 prevAll()을 사용하세요.
아래의 글도 찾고 계시지 않나요?